Denoでフロントエンド (SPA) 開発をする
#書きかけ #Deno #フロントエンド
はじめに
Deno v2.4にて導入されたdeno bundleを使用した例について紹介します
最小限のセットアップ
セットアップ
1. deno.jsonを用意します
code:deno.json
{
"imports": {
"preact": "npm:preact@10.27.1",
"@std/http": "jsr:@std/http@1.0.20"
},
"tasks": {
"dev": "deno bundle --unstable-bundle --watch --outdir=dist index.html & deno task serve",
"build": "deno bundle --unstable-bundle --outdir=dist index.html",
"serve": "deno run --permission-set=serve @std/http/file-server dist"
},
"permissions": {
"serve": {
"read": "dist",
"net": "0.0.0.0:8000"
}
},
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "preact",
"lib": [
"ES2020",
"dom",
"dom.asynciterable",
"dom.iterable"
]
},
"lint": {
"rules": {
"tags": "react",
"include": "no-console"
}
},
"exclude": "dist"
}
2. index.htmlを用意します
code:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="module" src="./index.tsx"></script>
</body>
</html>
3. index.tsxを用意します
code:index.tsx
import { render } from "preact";
function App() {
return (
<main>
Hello Deno!
</main>
);
}
render(<App />, document.body);
開発用サーバーの起動
1. 開発用にサーバーを起動します
code:shell
$ deno task dev
2. ブラウザーでhttp://localhost:8000/にアクセスします